<template>
  <div class="menu_bg">
    <div class="menu">
      <!--Begin 商品分类详情 Begin-->
      <div class="nav">
        <div class="nav_all" 
             @mouseenter="handleMouseEnter"
             @mouseleave="handleMouseLeave">
          <div class="nav_t">
            全部商品分类
          </div>
          <div class="leftNav" v-show="!isSearchProduct || showCategories">
            <ul>
              <li v-for="(category1, index) in treeData" :key="category1.id"
                @mouseenter="() => handleCategoryMouseEnter(category1.id)">
                <div class="fj">
                  <span class="n_img">
                    <span></span>
                  </span>
                  <span class="fl">{{ category1.name }}</span>
                </div>
                <div class="zj" :style="{ top: -(index * 40) + 'px' }">
                  <div class="zj_l">
                    <div class="zj_l_c">

                      <template v-for="(category2, index2) in category1.children" :key="category2.id">
                        <span style="font-size: large; color: black;">{{ category2.name }}</span>
                        <span style=" color: black;" v-if="index2 < category1.children.length - 1">/</span>
                      </template><br />

                      <template v-for="(category2, index2) in category1.children" :key="category2.id">
                        <template v-for="(category3, index3) in category2.children" :key="category3.id">
                          <a @click.prevent="toCategory(category3.id)">{{ category3.name }}</a>
                          <span v-if="index3 < category2.children.length">|</span>
                        </template>
                      </template>
                    </div>
                  </div>
                  <div class="zj_r">
                    <a href="#"><img src="/images/n_img1.jpg" width="236" height="200" /></a>
                    <a href="#"><img src="/images/n_img2.jpg" width="236" height="200" /></a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--End 商品分类详情 End-->
      <ul class="menu_r">
        <li><a @click.prevent="toIndex">首页</a></li>
        <li v-for="category1 in treeData">
          <a @click.prevent="toCategory(category1.id)">{{ category1.name }}</a>
        </li>
      </ul>
      <div class="m_ad">中秋送好礼！</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios'
import { useRouter } from 'vue-router'


//控制菜单在商品搜索的显示
const props = defineProps({
  isSearchProduct: {
    type: Boolean,
    default: false
  }
})

const router = useRouter();
const treeData = ref([]);
const showCategories = ref(false);
let time = null; //移入移出时间

const getCategoryTree = async () => {
  try {
    const response = await axios.get('/api/categoryTree');
    treeData.value = response.data.categoryTree;
    // console.log('获取到的树形分类数据:', treeData.value);

  } catch (error) {
   
    treeData.value = [];
  }
}

//首页
const toIndex = () => {
  router.push({ path: '/' })
}

// 组件挂载时获取数据
onMounted(() => {
  getCategoryTree();
})

const toCategory = (id) => {
  router.push({ path: '/searchProduct', query: { id: id } })
}

// 处理鼠标进入整个菜单区域
const handleMouseEnter = () => {
  if (props.isSearchProduct) {
    // 清除可能存在的隐藏定时器
    if (time) {
      clearTimeout(time);
      time = null;
    }
    showCategories.value = true;
  }
}

// 处理鼠标离开整个菜单区域
const handleMouseLeave = () => {
  if (props.isSearchProduct) {
    time = setTimeout(() => {
      showCategories.value = false;
      time = null;
    }, 100); 
  }
}

// 处理鼠标进入分类项
const handleCategoryMouseEnter = (categoryId) => {
  if (props.isSearchProduct) {
    // 清除定时器
    if (time) {
      clearTimeout(time);
      time = null;
    }
    showCategories.value = true;
  }
  loadSubCategories(categoryId);
}
const loadSubCategories = async (categoryId) => {
}

</script>

<style scoped>
.leftNav ul li:hover {
  background-color: #FFF;
  color: #333;
  transform: translateX(5px);
  transition: transform 1s ease;
}

.leftNav ul li:nth-child(-n+10):hover .zj {
  display: flex;
}
</style>